<template>
  <div
    class="g2-drawer__wrapper"
    :style="wrapperStyle"
    v-show="wrapperVisible"
    @click.self="handleWrapperClick"
  >
    <g2DrawerTransition @afterLeave="afterLeave">
      <div
        class="g2-drawer"
        role="dialog"
        aria-modal="true"
        :aria-label="title || 'dialog'"
        :style="style"
        ref="dialog"
        v-show="visible"
      >
        <div class="g2-drawer__header">
          <slot name="title">
            <span class="g2-dialog__title">{{ title }}</span>
          </slot>
          <button
            type="button"
            class="g2-dialog__headerbtn"
            aria-label="Close"
            v-if="showClose"
            @click="handleClose"
          >
            <i class="g2-dialog__close el-icon el-icon-close"></i>
          </button>
        </div>
        <div class="g2-drawer__body" v-if="rendered">
          <slot></slot>
        </div>
        <div class="g2-drawer__footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </g2DrawerTransition>
  </div>
</template>

<script>
import Popup from "element-ui/src/utils/popup";
import Migrating from "element-ui/src/mixins/migrating";
import emitter from "element-ui/src/mixins/emitter";

import g2DrawerTransition from "./drawer-transition";
export default {
  name: "g2Drawer",
  mixins: [Popup, emitter, Migrating],
  components: {
    g2DrawerTransition
  },
  props: {
    title: {
      type: String,
      default: ""
    },
    modal: {
      type: Boolean,
      default: true
    },
    modalAppendToBody: {
      type: Boolean,
      default: true
    },

    appendToBody: {
      type: Boolean,
      default: true
    },
    closeOnClickModal: {
      type: Boolean,
      default: true
    },

    closeOnPressEscape: {
      type: Boolean,
      default: true
    },

    showClose: {
      type: Boolean,
      default: true
    },
    width: String
  },
  data() {
    return {
      closed: false,
      wrapperVisible: false
    };
  },
  computed: {
    style() {
      let style = {};
      if (!this.fullscreen) {
        style.marginTop = this.top;
        if (this.width) {
          style.width = this.width;
        }
      }

      if (this.right) {
        style.marginTop = 0;
      }
      return style;
    },
    wrapperStyle() {
      let style = {
        width: "100%"
      };
      if (this.right) {
        style.position = "fixed";
        style.top = 0;
        style.bottom = 0;
        style.right = 0;
      }
      return style;
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.wrapperVisible = true;
        this.closed = false;
        this.$emit("open");
        this.$el.addEventListener("scroll", this.updatePopper);
        this.$nextTick(() => {
          this.$refs.dialog.scrollTop = 0;
        });
        if (this.appendToBody) {
          document.body.appendChild(this.$el);
        }
      } else {
        this.$el.removeEventListener("scroll", this.updatePopper);
        if (!this.closed) this.$emit("close");
      }
    }
  },

  methods: {
    handleWrapperClick() {
      if (!this.closeOnClickModal) return;
      this.handleClose();
    },
    updatePopper() {
      this.broadcast("ElSelectDropdown", "updatePopper");
      this.broadcast("ElDropdownMenu", "updatePopper");
    },
    handleClose() {
      if (typeof this.beforeClose === "function") {
        this.beforeClose(this.hide);
      } else {
        this.hide();
      }
    },
    hide(cancel) {
      if (cancel !== false) {
        this.$emit("update:visible", false);
        this.$emit("close");
        this.closed = true;
      }
    },
    afterEnter() {
      this.$emit("opened");
    },
    afterLeave() {
      this.wrapperVisible = false;
      this.$emit("closed");
    }
  }
};
</script>

<style scoped lang="scss" src="./index.scss">
</style>
